<template>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" @chang="">全选</th>
                <th>商品</th>
                <th>单价(元)</th>
                <th>数量</th>
                <th>小计(元)</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <template v-for="item in shopArray">
                <tr v-show="item.number > 0">
                    <td><input type="checkbox" @change="changeTotalShop(item.price * item.number)"></td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td><button @click="item.number--">-</button>{{ item.number }}<button
                            @click="item.number++">+</button></td>
                    <td>{{ item.price * item.number }}</td>
                    <td><button @click="removeData(item.id)">删除</button></td>
                </tr>
            </template>
            <tr>
                <td colspan="5">
                    <p><span>删除选中商品</span>
                        <span>共{{ shopArray.length }}件商品,已选择{{ totalShop.length }}件商品</span>
                        <span>合计(不含运费):{{ result }}</span>
                        <button>结算</button>
                    </p>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script setup>
import { ref } from 'vue'
const isDisplay = ref('true');
const totalShop = ref([]);
const shopArray = ref([
    { id: 1, name: '苹果', price: 10, number: 10 },
    { id: 2, name: '山竹', price: 24, number: 10 },
    { id: 3, name: '榴莲', price: 45, number: 1 },
    { id: 4, name: '西瓜', price: 2, number: 1 }
])
const result = ref(0);
function removeData(id) {
    shopArray.value = shopArray.value.filter(item => {
        return item.id != id
    })
}
function changeTotalShop(data) {
    if ((totalShop.value).includes(data)) {
        totalShop.value = totalShop.value.filter(item => {    
            return item != data
        })
        result.value -= data;
    } else {
        result.value += data - 0;
        (totalShop.value).push(data)
    }

}



</script>

<style scoped>
td,
th {
    margin: 10px;
    text-align: center;
}
span{
    margin: 20px;
}
</style>